<template>
  <div>
    <x-header title="推荐注册"></x-header>
    <popup-picker title="点位" :data="npList" :columns="1" v-model="selNetPointId" show-name></popup-picker>
    <group title="用户信息" label-width="5.5em" label-margin-right="2em" label-align="justify">
      <x-input title="登陆帐号" v-model="user.userName"></x-input>
      <x-input title="登陆密码" v-model="user.password" type="password"></x-input>
      <x-input title="确认密码" v-model="user.password2" type="password"></x-input>
      <x-input title="姓名" v-model="user.name"></x-input>
      <x-input title="手机号" v-model="user.phoneNumber" type="tel" is-type="china-mobile"></x-input>
      <!-- <x-input title="电子邮箱" v-model="user.emailAddress" type="email" is-type="email"></x-input> -->
      <x-input title="开户银行" v-model="user.bank"></x-input>
      <x-input title="银行卡号" v-model="user.bankCardNumber"></x-input>
      <x-input title="身份证号" v-model="user.identityCard" :is-type="validateIdcard"></x-input>
      <x-textarea title="联系地址" v-model="user.address" placeholder="请填写联系地址" :show-counter="false" :rows="3"></x-textarea>
    </group>
    <group title="订单信息" label-width="5.5em" label-margin-right="2em" label-align="justify">
      <x-input title="收件人" v-model="user.order.consignee"></x-input>
      <x-input title="联系电话" v-model="user.order.consigneeTel" type="tel" is-type="china-mobile"></x-input>
      <x-input title="收件地址" v-model="user.order.consigneeAddress"></x-input>
    </group>
    <x-button type="primary" action-type="button" @click.native="onSubmit">提交注册</x-button>
  </div>
</template>
<script>
import { PopupPicker, XHeader, XButton, Group, XInput, XTextarea } from 'vux'
import { Toast } from 'mint-ui'
import { CreateUser, ValidateIdcard } from '@/api/user'
import { GetMyNetPoints } from '@/api/netPoint'

export default {
  components: {
    PopupPicker,
    Group,
    XInput,
    XTextarea,
    XHeader,
    XButton
  },
  data() {
    var ValidIdcard = value => {
      var m = ValidateIdcard(value)
      return { valid: value === '', msg: m }
    }
    return {
      user: {
        userName: '',
        password: '',
        password2: '',
        name: '',
        phoneNumber: '',
        emailAddress: '',
        identityCard: '',
        address: '',
        bank: '',
        bankCardNumber: '',
        accountType: 1,
        currentNetPointId: 0,
        order: {
          consignee: '',
          consigneeTel: '',
          consigneeAddress: ''
        }
      },
      validateIdcard: ValidIdcard,
      npList: [],
      selNetPointId: []
    }
  },
  watch: {
    selNetPointId: function(newVal, oldVal) {
      this.user.currentNetPointId = parseInt(newVal[0])
    }
  },
  activated() {
    this.getList()
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      var _this = this
      GetMyNetPoints().then(result => {
        var rd = result.data.filter(x => x.netType === 0)
        _this.npList = rd.map(x => {
          return {
            name: `${x.id}   ${_this.$moment(x.creationTime)}`,
            value: x.id.toString()
          }
        })
        _this.selNetPointId = [_this.npList[0].value]
      })
    },
    validForm(user) {
      var _this = this
      if (_this.user.userName.length < 3 || _this.user.userName.length > 16) {
        return '登陆帐号长度在 3 到 16 个字符'
      }
      if (_this.user.password.length < 3 || _this.user.password.length > 16) {
        return '密码长度在 3 到 16 个字符'
      }
      if (_this.user.password !== _this.user.password2) {
        return '两次输入密码不一致!'
      }
      if (_this.user.name.length < 1 || _this.user.name.length > 16) {
        return '姓名长度在 3 到 16 个字符'
      }
      var regPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!regPhone.test(_this.user.phoneNumber)) {
        return '请输入正确的手机号'
      }
      var cardMsg = ValidateIdcard(_this.user.identityCard)
      if (cardMsg !== '') {
        return cardMsg
      }
      if (_this.user.order.consignee.length < 1) {
        return '请输入收件人'
      }
      if (_this.user.order.consigneeTel.length < 1) {
        return '请输入联系电话'
      }
      if (_this.user.order.consigneeAddress.length < 1) {
        return '请输入收件地址'
      }
    },
    onSubmit() {
      var _this = this
      var msg = _this.validForm(_this.user)
      if (msg) {
        Toast(msg)
        return
      }
      _this.$vux.loading.show()
      CreateUser(_this.user)
        .then(result => {
          Toast('创建成功')
          _this.$vux.loading.hide()
          setTimeout(() => {
            _this.$router.push({ path: '/home' })
          })
        })
        .catch(response => {
          _this.$vux.loading.hide()
        })
    }
  }
}
</script>
